<template>
  <div class="dashboard-container">
    <!-- <el-row :gutter="32">
      <el-col :span="6">
        <Card title="固定资产" :total="assetTotal" clazz="purple" />
      </el-col>
      <el-col :span="6">
        <Card title="仓库数量" :total="storehouseTotal" clazz="green" />
      </el-col>
      <el-col :span="6">
        <Card title="在用设备" :total="usedAssetTotal" clazz="orange" />
      </el-col>
      <el-col :span="6">
        <Card title="总价值" :total="assetMoney" clazz="darkgreen" unit="元" />
      </el-col>
    </el-row> -->
    <el-row :gutter="32">
      <el-col :span="24">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetChart :key="assetStatsByTypeChartKey" title="分类资产统计" :data="assetStatsByTypeChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByTypeTableData" border style="width: 100%" height="500">
              <el-table-column prop="name" header-align="center" align="center" label="分类" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetInstitutionChart :key="assetStatsByInstitutionChartKey" title="厅局资产统计" :data="assetStatsByInstitutionChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByInstitutionTableData" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="部门" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="mixed">
          <div style="width: 50%;">
            <AssetStatusChart :key="assetStatsByStatusChartKey" title="资产状况统计" :data="assetStatsByStatusChartData" />
          </div>
          <div style="width: 50%">
            <el-table :data="assetStatsByStatusTableData" border style="width: 100%" height="320">
              <el-table-column prop="name" header-align="center" align="center" label="状态" />
              <el-table-column prop="count" header-align="center" align="center" label="数量" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { statsByType, statsByInstitution, statsByStatus } from '@neu/dcam-ui/api/fixedAsset'
import AssetChart from './components/AssetChart.vue'
import AssetInstitutionChart from './components/AssetInstitutionChart.vue'
import AssetStatusChart from './components/AssetStatusPieChart.vue'

export default {
  name: 'Dashboard',
  components: {
    AssetChart,
    AssetInstitutionChart,
    AssetStatusChart
  },
  data() {
    return {
      assetStatsByTypeChartKey: 'statsByType' + Date.now(),
      assetStatsByTypeChartData: [],
      assetStatsByTypeTableData: [],
      assetStatsByInstitutionChartKey: 'statsByInstitution' + Date.now(),
      assetStatsByInstitutionChartData: [],
      assetStatsByInstitutionTableData: [],
      assetStatsByStatusChartKey: 'statsByStatus' + Date.now(),
      assetStatsByStatusChartData: [],
      assetStatsByStatusTableData: []
    }
  },
  created() {
    this.getStatsByAssetType()
    this.getStatsByInstitution()
    this.getStatsByStatus()
  },
  methods: {
    // 资产分类统计
    getStatsByAssetType() {
      statsByType().then(response => {
        const data = response.data
        this.assetStatsByTypeTableData = data
        this.assetStatsByTypeChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByTypeChartKey = 'statsByType' + Date.now()
      })
    },
    // 按部门统计资产
    getStatsByInstitution() {
      statsByInstitution().then(response => {
        const data = response.data.slice(0, 6)
        this.assetStatsByInstitutionTableData = data
        this.assetStatsByInstitutionChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByInstitutionChartKey = 'statsByInstitution' + Date.now()
      })
    },
    // 按状态统计资产
    getStatsByStatus() {
      statsByStatus().then(response => {
        const data = response.data.slice(0, 6)
        this.assetStatsByStatusTableData = data
        this.assetStatsByStatusChartData = data.map(it => {
          return { value: it.count, name: it.name }
        })
        this.assetStatsByStatusChartKey = 'statsByStatus' + Date.now()
      })
    }
  }
}
</script>

<style lang="scss">
  .mixed {
    .el-card__body {
      display: flex;
      flex-direction: row;
    }
  }
</style>
